<template>
	<div>
		<div class="carEditorSubmit">
			<button @click="toHistory" class="submits" style="font-size: 14px;">反馈历史</button>
		</div>
		<div class="page has-navbar has-tabbar" v-nav="{title: '意见反馈', showBackButton: true}">
			<div class="page-content padding-top reserve-margin">
				<div class="feedback">
					<form @submit.prevent="submitFn">
						<div class="car-editor-textarea">
							<textarea required v-model="res.customerRemark" :class="{on:textareaNotice}" name="feedbackContent"  placeholder="请输入意见反馈"></textarea>
							<span class="span">{{remarkLength||0}}/100</span>
						</div>
						<div class="feedback-img">
							<h5>添加照片</h5>
							<img :src="imgSrc" @click="imgClick" width="120" />
							<input type="file" ref="fileImg" @change="fileFn" accept="image/*" class="none" />
							<input type="text" name="userId" class="none" v-model="userId" />
						</div>
						<button class="md-button button button-assertive button-block" type="submit">提交意见</button>
					</form>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				res:{
					customerRemark:''
				},
				textareaNotice:false,
				remarkLength:'',
				userId:sess.get('userSession').userId,
				imgSrc:'static/images/png/addimg.png',
				imagesSrc:'',
			}
		},
		methods:{
			submitFn(event){
				if(this.remarkLength>100){
					$toast.show('请您反馈意见在100字以内', 2000)
					return
				}
				let formData = new FormData(event.target)
				formData.append('feedbackImage',this.imagesSrc)
				window.axios.post(baseUrl+'/controller/feedback/insertFeedback',formData).then(res=>{
					if(res){
						setTimeout(()=>{
							$toast.show('提交成功,感谢您的反馈', 2000)
							setTimeout(()=>{
								this.$router.go(-1)
							},1000)							
						},400)
					}
				})
			},
			imgClick(){
				this.$refs.fileImg.click()
			},
			fileFn(val){
				let formData = new FormData()
				formData.append('uploadFile',this.$refs.fileImg.files[0])
				window.axios.post(baseUrl+'/controller/upload/uploadFile',formData).then(res=>{
					if(res){
						this.imgSrc = imgUrl+res.data.result.pathUrl
						this.imagesSrc = res.data.result.pathUrl
					}
				})
			},
			toHistory(){
				this.$router.push({path:'/user_feedback_history'})
			}
		},
		watch:{
			'res.customerRemark':function(){
				if(this.res.customerRemark){
					this.remarkLength = this.res.customerRemark.length
					if(this.remarkLength>100)
						this.textareaNotice = true
					else
						this.textareaNotice = false
				}
			},
			
		}
	}
</script>
<style scoped>
	.feedback{
		padding: 15px; background: #fff;
	}
	.feedback .car-editor-textarea{ border: 1px #999; border-style:dashed ; position: relative;}
	.feedback .car-editor-textarea textarea{ padding: 10px; width: 100%; font-size: 12px;}
	.feedback-img{ font-size: 12px;}
	.feedback-img img{ max-width: 100%;}
	.feedback-img h5{ font-size: 12px; color: #999;}
</style>
